<template>
  <div>
    <!-- 订单 -->
    <div class="annual-curve">
      <el-button type="primary" class="button-width" @click="yuangong"
        >按员工</el-button
      >
      <el-button type="success" class="button-width" @click="bumen"
        >按部门</el-button
      >
    </div>
    <div style="width: 1328px; height: 650px" id="myChart" v-show="show"></div>
    <div style="width: 1328px; height: 650px" id="department" v-show="AA"></div>
  </div>
</template>

<script>
import { datagendanAxios, datayuangongAxios } from "../../http/apis/dataApi/indexA";

export default {
  name: "profile",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      show: true,
      AA: false,
      X: [],
      Y: [],
      A: [],
      B: [],
      XX: [],
      YY: [],
      AAA: [],
      BB: [],
      
    };
  },
  created() {
   Promise.all([
      datagendanAxios(Date.now() - 1000 * 60 * 60 * 24 * 7, Date.now()),
      datagendanAxios(Date.now() - 1000 * 60 * 60 * 24 * 30, Date.now()),
      datagendanAxios(Date.now() - 1000 * 60 * 60 * 24 * 1000, Date.now()),
    ])
      .then((res) => {
        console.log("3次并发:", res);
        this.X.push(...Object.keys(res[0].data.data));
        this.Y.push(...Object.values(res[0].data.data));
        this.A.push(...Object.values(res[1].data.data));
        this.B.push(...Object.values(res[2].data.data));
        this.Department();
      })
      .catch((err) => {
        console.log(err);
      });
    // 员工
    Promise.all([
      datayuangongAxios(Date.now() - 1000 * 60 * 60 * 24 * 7, Date.now()),
      datayuangongAxios(Date.now() - 1000 * 60 * 60 * 24 * 30, Date.now()),
      datayuangongAxios(Date.now() - 1000 * 60 * 60 * 24 * 1000, Date.now()),
    ])
      .then((res) => {
        console.log("3次并发:", res);
        this.XX.push(...Object.keys(res[0].data.data));
        this.YY.push(...Object.values(res[0].data.data));
        this.AAA.push(...Object.values(res[1].data.data));
        this.BB.push(...Object.values(res[2].data.data));
        this.drawLine();
      })
      .catch((err) => {
        console.log(err);
      });
  },

  mounted() {
    // this.drawLine();
    // this.Department();
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        title: {
          text: "按员工",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["七天内", "三十天内", "所有记录"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.XX,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "七天内",
            type: "line",
            stack: "Total",
            data: this.YY,
          },
          {
            name: "三十天内",
            type: "line",
            stack: "Total",
            data: this.AAA,
          },
          {
            name: "所有记录",
            type: "line",
            stack: "Total",
            data: this.BB,
          },
        ],
      });
    },
    Department() {
      // 基于准备好的dom，初始化echarts实例
      let department = this.$echarts.init(
        document.getElementById("department")
      );
      // 绘制图表
      department.setOption({
        title: {
          text: "按部门",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["七天内", "三十天内", "所有记录"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.X,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "七天内",
            type: "line",
            stack: "Total",
            data: this.Y,
          },
          {
            name: "三十天内",
            type: "line",
            stack: "Total",
            data: this.A,
          },
          {
            name: "所有记录",
            type: "line",
            stack: "Total",
            data: this.B,
          },
        ],
      });
    },
    yuangong() {
      this.show = true;
      this.AA = false;
    },
    bumen() {
      this.show = false;
      this.AA = true;
    },
  },
};
</script>
<style lang="scss">
.annual-curve {
  display: flex;
  justify-content: center;
}
.button-width {
  width: 120px;
  height: 38px;
}
</style>